﻿@inject SupplierService SupplierService

<div class="demo-description mw-1100">
    <h2><DemoNavLink Link="GridEditData#EditModes" />Edit Modes</h2>
    <p>
        The <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1">Data Grid</a> allows users to add, edit, and remove data rows.
    </p>
    <p>
        <ol>
            <li>
                Add <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridCommandColumn">DxDataGridCommandColumn</a> to the Data Grid. This column displays the <strong>New</strong>, <strong>Edit</strong>, and <strong>Delete</strong> command buttons.
                To hide unnecessary buttons, use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridCommandColumn.NewButtonVisible">NewButtonVisible</a>, <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridCommandColumn.EditButtonVisible">EditButtonVisible</a>, and <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridCommandColumn.DeleteButtonVisible">DeleteButtonVisible</a> properties.
            </li>
            <li>
                Handle the following events to post changes to an underlying data source:
                <ul>
                    <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.RowInserting">RowInserting</a>/<a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.RowInsertingAsync">RowInsertingAsync</a> - Fires when a user adds a new row.</li>
                    <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.RowUpdating">RowUpdating</a>/<a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.RowUpdatingAsync">RowUpdatingAsync</a> - Fires when a user updates a data row.</li>
                    <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.RowRemoving">RowRemoving</a>/<a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.RowRemovingAsync">RowRemovingAsync</a> - Fires when a user deletes a data row.</li>
                </ul>
            </li>
            <li>Handle the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.InitNewRow">InitNewRow</a> event to initialize new data rows.</li>
            <li>Specify the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.KeyFieldName">key data field</a> to enable the Data Grid to identify individual data items.</li>
        </ol>
    </p>
    <p>
        The Data Grid supports different edit modes. Use the <strong>Edit Mode</strong> option below (corresponds to the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.EditMode">EditMode</a> property) to switch between available modes.
    </p>
    <ul>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DataGridEditMode">DataGridEditMode.EditForm</a> (Default) – The Data Grid displays the edit form instead of the edited row.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DataGridEditMode">DataGridEditMode.PopupEditForm</a> – The Data Grid displays the edit form in a pop-up window.</li>
    </ul>
    <p>
        When a user clicks <b>New</b> or <b>Edit</b>, the Data Grid displays the Edit Form. This form consists of data editors for each visible column. The editor type depends on the corresponding column's type.
    </p>
</div>
<div class="option-container">
    <span>Edit Mode: </span>
    <DxComboBox Data="@EditModes" @bind-Value="CurrentEditMode"></DxComboBox>
</div>

<DxDataGrid @ref="@grid"
            Data="@SupplierService.Suppliers"
            RowRemovingAsync="@OnRowRemovingAsync"
            RowUpdatingAsync="@OnRowUpdatingAsync"
            RowInsertingAsync="@OnRowInsertingAsync"
            InitNewRow="@OnInitNewRowAsync"
            CssClass="mw-1100"
            PageSize="100"
            ShowPager="false"
            KeyFieldName="SupplierID"
            EditMode="@CurrentEditMode">
    <DxDataGridCommandColumn Width="100px" />
    <DxDataGridColumn Field="@nameof(Supplier.SupplierName)" />
    <DxDataGridComboBoxColumn Field="@nameof(Supplier.SupplierCategoryID)" Caption="Category" Data="@SupplierService.SupplierCategories"
                              ValueFieldName="@nameof(SupplierCategory.SupplierCategoryID)" TextFieldName="@nameof(SupplierCategory.SupplierCategoryName)" />
    <DxDataGridComboBoxColumn Field="@nameof(Supplier.DeliveryMethodID)" Caption="Delivery Method" Data="@SupplierService.DeliveryMethods"
                              ValueFieldName="@nameof(DeliveryMethod.DeliveryMethodID)" TextFieldName="@nameof(DeliveryMethod.DeliveryMethodName)" />
    <DxDataGridColumn Field="@nameof(Supplier.PhoneNumber)" />
    <DxDataGridColumn Field="@nameof(Supplier.BankAccountBranch)" />
    <DxDataGridColumn Field="@nameof(Supplier.BankAccountNumber)" />
</DxDataGrid>

<CodeSnippet_Grid_DataEditing_EditMode />

@code {
    DxDataGrid<Supplier> grid;

    IEnumerable<DataGridEditMode> EditModes { get; } = Enum.GetValues(typeof(DataGridEditMode)).Cast<DataGridEditMode>();

    DataGridEditMode currentEditMode = DataGridEditMode.EditForm;
    DataGridEditMode CurrentEditMode {
        get => currentEditMode;
        set {
            if(currentEditMode != value) {
                currentEditMode = value;
                CancelEdit();
            }
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender) {
        if (firstRender) {
            var editableSupplier = await SupplierService.GetSupplierByIdAsync(2);
            await grid.StartRowEdit(editableSupplier);
        }
    }
    Task OnRowRemovingAsync(Supplier dataItem) {
        return SupplierService.Remove(dataItem);
    }
    Task OnRowUpdatingAsync(Supplier dataItem, IDictionary<string, object> newValue) {
        return SupplierService.Update(dataItem, newValue);
    }
    Task OnRowInsertingAsync(IDictionary<string, object> newValue) {
        return SupplierService.Insert(newValue);
    }
    async Task OnInitNewRowAsync(Dictionary<string, object> values) {
        values.Add("SupplierCategoryID", 1);
        values.Add("DeliveryMethodID", 1);
        values.Add("PhoneNumber", "(000) 000-0000");
        values.Add("BankAccountNumber", "0000000000");
        await Task.CompletedTask;
    }
    void CancelEdit() {
        var cancelTask = Task.Run(async () => await grid.CancelRowEdit());
        cancelTask.GetAwaiter().GetResult();
    }
}
